<template>
	<view>
		<!-- 导航栏组件，可左右放内容 fixed让导航栏固定在上方-->
		<uni-nav-bar :fixed="true" :status-bar="true" :title="fenlei.name" leftIcon="left" @clickLeft="back" />
		<!-- 搜索框 -->
		<view
			style="display:flex;width: 700rpx ;align-items: center;justify-content: center;margin: 10rpx auto;border-radius:40rpx;">
			<u-search bgColor="#F7F8FA" placeholder="请输入商品名称或款号" :showAction="false" v-model="soukey"
				@search="get_goods"></u-search>
		</view>
		<!-- 按价格、销量、筛选 -->

		<view class="container">
			<!-- 双列瀑布流容器 -->
			<view class="waterfall-column">
				<!-- 左列 -->
				<view @click="goods_detail(item)" v-for="(item, index) in leftList" :key="index" class="product-item">
					<product-card :item="item"></product-card>
				</view>
			</view>

			<view class="waterfall-column">
				<!-- 右列 -->
				<view  @click="goods_detail(item)"  v-for="(item, index) in rightList" :key="index" class="product-item">
					<product-card :item="item"></product-card>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//引入组件
	import ProductCard from '@/components/product-card.vue'
	export default {
		components: {
			ProductCard
		},
		data() {
			return {
				soukey: '', //搜索框
				fenlei: '', //分类
				productList: [], // 原始数据
				leftList: [], // 左列数据
				rightList: [] // 右列数据
			}
		},
		mounted() {
			this.get_goods();
		},
		onLoad() {
			this.fenlei = uni.getStorageSync('fenlei')
			console.log("55",this.fenlei);
			// this.get_goods()
		},
		methods: {
			// 跳转到商品详情页
			goods_detail(e) {
				uni.setStorageSync('goods_detail', e)
				uni.navigateTo({
					url: '/pages/goods_detail/goods_detail'
				})
			},
			// 返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 加载产品数据
			get_goods() {
				let shaixuan = {
					field: 'goods_price', // 排序字段：price/sales
					order: 'asc' // 排序方式：asc升序/desc降序
				}
				if(this.fenlei.weizhi==1){
					uniCloud.callFunction({
						name: "fun1",
						data: {
							leixing: 5, //类型为1时，获取我管理的校区
							fenlei1_id: this.fenlei._id,
							key: this.soukey,
							shaixuan: shaixuan
						}
					}).then(res => {
						this.productList = res.result.data;
						// 分配双列数据
						this.splitColumns();
					})
				}else if(this.fenlei.weizhi==2){
					uniCloud.callFunction({
						name: "fun1",
						data: {
							leixing: 6, //类型为1时，获取我管理的校区
							fenlei2_id: this.fenlei._id,
							key: this.soukey,
							shaixuan: shaixuan
						}
					}).then(res => {
						this.productList = res.result.data;
						// 分配双列数据
						this.splitColumns();
					})
				}if(this.fenlei.weizhi==3){
					uniCloud.callFunction({
						name: "fun1",
						data: {
							leixing: 7, //类型为1时，获取我管理的校区
							fenlei3_id: this.fenlei._id,
							key: this.soukey,
							shaixuan: shaixuan
						}
					}).then(res => {
						this.productList = res.result.data;
						// 分配双列数据
						this.splitColumns();
					})
				}
				
			},
			// 动态分配双列数据
			splitColumns() {
				this.leftList = []
				this.rightList = []
				this.productList.forEach((item, index) => {
					if (index % 2 === 0) {
						this.leftList.push(item);
					} else {
						this.rightList.push(item);
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}

	.waterfall-column {
		width: 48%;
		/* 双列间距 */
	}

	.product-item {
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}
</style>